<template>
  <div>
    <span>全选:</span>
    <input type="checkbox" v-model="isAll" />
    <button @click="reverse">反选</button>
    <ul>
      <li v-for="(ele, i) in list" :key="i">
        <label>
          <input type="checkbox" v-model="ele.c" />
          {{ ele.name }}
        </label>
      </li>
    </ul>
  </div>
</template>

<script>
// 设置 默认数据
const defaultList = [
  {
    name: "猪八戒",
    c: false,
  },
  {
    name: "孙悟空",
    c: true,
  },
  {
    name: "唐僧",
    c: false,
  },
  {
    name: "白龙马",
    c: false,
  },
];
// 从本地 读取 数据
let arr = localStorage.getItem("hm18key");
// 如果 本地有，则转成数组；如果没有则 使用默认数组；
arr = arr ? JSON.parse(arr) : defaultList;

export default {
  data() {
    return {
      list: arr, // 将 数据 设置给 list
    };
  },
  // 侦听器：侦听 组件数据变化
  watch: {
    list: {
      deep: true, // 深度监听
      immediate: true, // 立即执行
      handler(newList) {
        // 处理函数
        localStorage.setItem("hm18key", JSON.stringify(this.list));
      },
    },
  },
  // 计算属性
  computed: {
    // 判断 数组中 是否 所有的 c 都是 true，如果都是true，则返回true
    //                                     如果有任意一个 false, 则返回false
    isAll: {
      get() {
        return this.list.every((e) => e.c === true);
      },
      set(val) {
        // 将 全选按钮的 选中状态  设置给 所有元素的c属性
        this.list.forEach((e) => (e.c = val));
      },
    },
  },
  methods: {
    reverse() {
      // 遍历数组，将 c 取反赋值
      this.list.forEach((e) => (e.c = !e.c));
    },
  },
};
</script>